* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background: papayawhip;
}
 
.container {
    min-width: 250px; 
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /*высота header и footer*/
    grid-template-rows: 100px 1fr 50px;
    min-height: 100vh;
}

/*Шапка*/
header {
    background-color: #ff754e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 0 25px 0 25px;
    margin-bottom: 20px;
}
/*ЛОГО*/
header img {
    width: 125px;
    height: 78px;
}

.menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.menu li {
    min-width: 7em;
    list-style-type: none;
    /* padding: 10px;
    margin: 15px; */
}

.menu_link {
    font-size: 20px;
    text-decoration: none;
    color: wheat;
    transition: .5s;
}

.menu_link:hover {
    color: wheat;
    background-color: royalblue;
    padding: 7px;
    /* border-bottom: 1px solid blue; */
}

/*Контент*/
.content {
    font-size: 25px;
    color: royalblue;
    padding: 0 25px 0 25px;
    margin-bottom: 50px;
}
/*Каталог*/
.product {
    width: 223px;
    margin: 50px 50px 0 0;
    outline: 5px solid coral;
    transition: .5s;
}

.product .name {
    display: inline-block;
    font-size: 1em;
    color: royalblue;
    text-decoration: none;
}

.product .name:hover {
    color: blue;
    /* border-bottom: 1px solid blue; */
}

.product:hover {
    outline: 5px solid #ffefd5;
}

.links {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.links img[alt="bike"] {
    width: 223px;
    height: 158px;
}
/*Товары*/
.content_product {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.text {
    width: 50%;
    background: wheat;
    border-radius: 15px;
    padding: 25px;
    color: coral;
}

.text a {
    padding: 10px;
    outline: 3px solid coral;
    float: right;
    text-decoration: none;
    background: coral;
    color: wheat;
    transition: .5s;
}

.text a:hover {
    background: wheat;
    color: chocolate;
    outline: 3px solid coral;
}

.text a:active {
    outline: 3px solid chocolate;
    background: coral;
    color: wheat;
}

.text2 {
    width: 100%;
    background: wheat;
    border-radius: 15px;
    padding: 25px;
    color: coral;
    margin: 20px 0 20px 0;
}

caption {
    color: coral;
    margin-top: 20px;
}

.img {
    object-fit: contain;
    /* outline: 3px solid coral; */
    width: 493px;
    height: 347px;
    transition: .5s;
}

.img:hover {
    /* outline: 3px solid #ffefd5; */
}

.specifications {
    width: 100%;
    list-style-type: none;
    border-collapse: collapse;
    background: coral;
    color: wheat;
    border-radius: 15px;
    border-spacing: 10px;
    padding: 10px;
}

.specifications > li > img {
    width: 1em; 
}

.buy_product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2em;
    outline: 5px solid;
    padding-left: 5px;
}

.buy_product b {
    color: #00bfff;
}

.buy_btn {
    padding: 10px;
    outline: 3px solid coral;
    background: coral;
    color: wheat;
    transition: .5s;
    border: none;
    font-size: 1em;
}

.more {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 100px;
}

.buy_btn:hover {
    background: wheat;
    color: chocolate;
    outline: 3px solid coral;
}

.center {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

.comment {
    width: 30vw;
    display: flex;
    justify-content: flex-start;
    background-color: #ff754e;
    color: #f5deb3;
    align-items: center;
    padding: 15px;
    margin-top: 20px;
    border-radius: 15px;
}

.content_comment {
    width: 450px;
}

.content_desc {
    background-color: #f5deb3;
    color: coral;
    padding: 7px;
    margin-bottom: 20px;
}

.avatar {
    width: 90px;
    margin-right: 25px;
}

.avatar img {
    width: 100%;
}

.form_product {
    width: 40%;
    min-height: 40vh;
    background: #ff754e;
    padding: 25px;
    border-radius: 15px;
    margin: 25px 25px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.label_product {
    color:#f5deb3;
}

#name {
    text-transform: capitalize;
}

#name, #email, #price, #count, #login,
#password, #new_login, #new_password, #repeat_password 
{
    width: 96%;
    padding: 2%;
    font-size: 18px;
    color: chocolate;
    background: wheat;
    border: none;
    margin: 10px 0 10px 0;
    outline: none;
    transition: .5s;
}

#name:focus, #email:focus, #text:focus, #price:focus, #count:focus,
#desc_short:focus, #desc_long:focus, #specification:focus, #login:focus, #password:focus,
#new_login:focus, #new_password:focus, #repeat_password:focus  
{
    background-color: #ff754e;
    outline: 3px solid #f5deb3;
    color: #f5deb3;

}

#text {
    margin-top: 28px;
    width: 96%;
    min-height: 150px;
    resize: vertical;
    font-size: 1em;
    transition: .5s;
}

#desc_short, #desc_long, #specification {
    margin: 10px 0 10px 0;
    width: 96%;
    min-height: 150px;
    resize: vertical;
    font-size: 0.6em;
    transition: .5s;
}

.form_btn {
    width: 100%;
    margin: 20px 0 0 0;
    padding: 10px;
    outline: 3px solid #ff754e;
    background: #f5deb3;
    color: #ff754e;
    transition: .3s;
    border: none;
    font-size: 1em;
}

.form_btn:hover {
    background: #ff754e;
    color: #f5deb3;
    outline: 3px solid #f5deb3;
}

/*Контакты*/

.form_span {
    color: wheat;
}

textarea {
    width: 235px;
    background: wheat;
    color: chocolate;
    border: none;
    padding: 2%;
    outline: none;
}

.input {
    width: 96%;
    padding: 2%;
    font-size: 18px;
    color: chocolate;
    background: wheat;
    border: none;
    margin: 10px 0 10px 0;
    outline: none;
    transition: .5s;
}

.input:focus {
    background-color: #ff754e;
    outline: 3px solid #f5deb3;
    color: #f5deb3;
}

/* .input[type="text"] {
    text-transform: capitalize;
} */

.btn {
    padding: 2%;
    font-family: 'Recursive', sans-serif;
    text-align: center;
    font-size: 18px;
    color: chocolate;
    background: wheat;
    border: none;
    outline: none;
    transition: .5s;
}

.btn:hover {
    color: wheat;
    background: chocolate;
}

.btn:active {
    color: chocolate;
    background: wheat;
}

.sign-in {
    width: 80%;
    min-height: 52vh;
    background: wheat;
    padding: 25px;
    border-radius: 15px;
    margin: 0 25px 20px 0;

    display: flex;
    justify-content: center;
    align-items: start;
}

.sign-in__btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
} 

/* .sign-in__btn input:not(:last-child) {
    margin-right: 7px;
} */

/*Подвал*/
footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 25px 0 25px;
    background: royalblue;
    color: wheat;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}

.disable-outline {
    outline: none;
}

.disable-outline:hover {
    outline: none;
}

.jc-fe {
    justify-content: flex-end;
}

.a_link {
    text-decoration: none;
    text-align: center;
    margin: 20px auto;
}

.w100 {
    width: 100%;
    height: inherit;
}

.w80 {
    width: 80%;
    height: inherit;
}

.w50 {
    width: 50%;
    height: inherit;
}

.mt50 {
    margin-top: 50px;
}

.mt20 {
    margin-top: 20px;
}

.p0 {
    padding: 0;
}

/*Админка*/

.carts {
    display: grid;
    grid-template-columns: repeat(4, 223px);
    justify-content: center;
    gap: 50px;
}

.cart {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    outline: 3px solid #ff754e;
    padding: 10px;
}

.cart__img {
    
}

.cart__name {
    margin-top: 15px;
    width: 100%;
    text-align: center;
    margin-bottom: auto;
}

.cart__form {
    width: 100%;
    background: none;
    padding: 0;
    margin: 0;
}

.cart__btn  {
    width: 100%;
    padding: 5px;
    background: coral;
    color: wheat;
    transition: .5s;
    border: none;
    font-size: 0.8em;
    margin-top: 10px;
}

.cart__add {
    font-size: 8em;
    margin: 0;
    padding: 0;
    position: relative;
}

.cart__btn:hover {
    color: coral;
    background-color: wheat;
}

.title {
    width: 100%;
    color: deepskyblue;
    font-style: italic;
    margin-bottom: 20px;
}

.error {
    color: black;
    font-size: 0.8em;
}

.uppercase {
    text-transform: capitalize;
}

.basket__btn {
    display: block;
    width: 2.5em;
}

.basket__btn:hover {
    padding: 0;
    background-color: unset;
}

.basket__btn > img {
    width: 100%;
    height: auto;
}

.table {
    border: 2px solid black;
}

.table td {
    width: 20%;
    padding: 5px;
    border: 1px solid black;
    text-align: center;
}